@function px2rem($px){
    $rem:37.5px;
    @return ($px / $rem)+rem;
}

body{
     background-color: #FFFFFF;
     width:auto;
}

//登录
#info{
    width: px2rem(375px);
    height: px2rem(667px);
    background-image: url('../images/BG.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
}
.input-content{
    padding-top: px2rem(250px);
    padding-right: px2rem(35px);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.login_input{
    position:relative;
    .input_bg{
        display: block;
        width: px2rem(270px);
        height: px2rem(38px);
        overflow: hidden;
        border: px2rem(1px) #d7d7d7 solid;
        border-radius: px2rem(15px);
        margin: 0 auto px2rem(8px) !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-left: px2rem(48px);
        font-size: px2rem(14px);
        line-height: normal;
        background-size: px2rem(28px) px2rem(28px);
        &:nth-child(6){
            position: relative;
            float: left;
            left: px2rem(4px);
            width: px2rem(175px);
            padding-left: px2rem(66px);
        }
    }

    label{
        display: block;
        position: relative;
        float: left;
        left: px2rem(65px);
        text-align: left;
        font-size: px2rem(16px);
        line-height:px2rem(38px);
        z-index:1;
    }

    .code_bg{
        display: block;
        float: left;
        height: px2rem(30px);
        padding-left: px2rem(10px);
        padding-top: px2rem(5px);
        width: px2rem(90px);
    }
}

#loginclick{
    display: block;
    position: absolute;
    float: left;
    width: px2rem(270px);
    height: px2rem(38px);
    font-size: px2rem(17px);
    background-color: #D9767A;
    border: px2rem(1px) #D9767A solid;
    border-radius: px2rem(15px);
    color: white;
    left:px2rem(48px);
    top:px2rem(148px);
}

//大厅
.content{
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

.header-content{
    overflow: hidden;
    background-color: #FA774A;
    position: fixed;
    top: 0;
    width: px2rem(375px);
    font-size: px2rem(18px);
    font-weight:bold;
    & li{
        float: left;
    }
    & li.button:active{
        background-color: #e4c81e;
    }

    & li span{
        display: block;
        color: white;
        text-align: center;
        height: px2rem(38px);
        line-height: px2rem(38px);
    }
    li:nth-of-type(1){
        width:25%;
//      span:nth-of-type(1){
//           padding-left: px2rem(14px);
//      }
    }

    li:nth-of-type(2){
        width:50%;
//      span:nth-of-type(1){
//           padding-left: px2rem(100px);
//      }
    }

    li:nth-of-type(3){
        width:25%;
//      span:nth-of-type(1){
//           padding-left: px2rem(85px);
//      }
    }
}

.body-content{
//  margin-top: px2rem(38px);
//  margin-bottom: px2rem(130px);
//  box-sizing: border-box;
//  -webkit-box-sizing: border-box;
//  text-align: center;
//  width: px2rem(375px);
}

.bottom-content{
    height:px2rem(60px);
    overflow: hidden;
    background-color: #9EB6CA;
    position: fixed;
    width: px2rem(375px);
    bottom: 0;
    font-size: px2rem(16px);
    font-weight:bold;
    ul{
        & li{
            float: left;
            width:25%;
        }
        & li.active{
            background-color: #e4c81e;
        }
        & li.button:active{
            background-color: #e4c81e;
        }
        & li.button:after{
            background-color: white;
        }
        & li.button:hover{
            background-color: #e4c81e;
        }
        & li span{
            display: block;
            color: white;
            height:px2rem(60px);
            padding-top:px2rem(35px);
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            text-align: center;
        }

        li:nth-of-type(1){
            span:nth-of-type(1):before{
                content:' ';
                display:block;
                position:absolute;
                width:px2rem(40px);
                height:px2rem(50px);
                background-image: url('../images/icon_1.png');
                background-repeat:no-repeat;
                background-size:100% 100%;
                -moz-background-size:100% 100%;
                top:px2rem(5px);
                left:px2rem(27px);
            }
        }

        li:nth-of-type(2){
            span:nth-of-type(1):before{
                content:' ';
                display:block;
                position:absolute;
                width:px2rem(50px);
                height:px2rem(50px);
                background-image: url('../images/icon_2.png');
                background-repeat:no-repeat;
                background-size:100% 100%;
                -moz-background-size:100% 100%;
                top:px2rem(5px);
                padding-left: px2rem(20px);
                left:px2rem(105px);
            }
        }

        li:nth-of-type(3){
            span:nth-of-type(1):before{
                content:' ';
                display:block;
                position:absolute;
                width:px2rem(50px);
                height:px2rem(50px);
                background-image: url('../images/icon_3.png');
                background-repeat:no-repeat;
                background-size:100% 100%;
                -moz-background-size:100% 100%;
                top:px2rem(5px);
                padding-left: px2rem(20px);
                left:px2rem(200px);
            }
        }

        li:nth-of-type(4){
            span:nth-of-type(1):before{
                content:' ';
                display:block;
                position:absolute;
                width:px2rem(50px);
                height:px2rem(50px);
                background-image: url('../images/icon_4.png');
                background-repeat:no-repeat;
                background-size:100% 100%;
                -moz-background-size:100% 100%;
                top:px2rem(5px);
                padding-left: px2rem(20px);
                left:px2rem(294px);
            }
        }
    }
}

//广告页
.slideBox{
    background:#490A05;
    position:relative;
    overflow:hidden;
    width:px2rem(665px);/* 设置焦点图最大宽度 */
    margin-top: px2rem(38px);
   .hd{
        position:absolute;
        width: 100%;
        height:px2rem(10px);
        line-height:px2rem(10px);
        bottom:px2rem(10px);
        right:0;
        text-align: center;
        li{
            display:inline-block;
            width:px2rem(6px);
            height:px2rem(6px);
            -webkit-border-radius:px2rem(2px);
            -moz-border-radius:px2rem(2px);
            border-radius:px2rem(2px);
            background:#fff;
            text-indent:px2rem(-9999px);
            overflow:hidden;
            margin:0 px2rem(3px);
        }
        li.on{
            background:#ff7d00;
        }
        .slideBox-ul{
            position: absolute;
            left:40%;
        }
   }
   .bd{
       position:relative;
       li{
           position:relative;
           text-align:center;
           img{
               vertical-align:top;
               width:px2rem(375px);/* 图片宽度100%，达到自适应效果 */
           }
       }
   }
}

//滚动条
.tit_indexa{
    width: 100%;
    height: px2rem(30px);
    overflow: hidden;
    background: #9BCB9C;
    background-size: px2rem(2px) px2rem(30px);
}
.tit_indexa p{
    width: 100%;
    height: px2rem(30px);
    line-height: px2rem(32px);
    vertical-align: middle;
    font-size: px2rem(14px);
    color: #fff;
    background: url('../images/icon_notice.png') px2rem(5px) center no-repeat;
    background-size:px2rem(16px) px2rem(16px);
    text-indent: px2rem(25px);
}

.gameItem{
    li{
        float: inherit;
        width:px2rem(80px);
        height:px2rem(80px);
        background: red;
        border-radius: px2rem(100px);
        margin:px2rem(5px) px2rem(19px) px2rem(50px) px2rem(25px);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        img{
            width:px2rem(50px);
            height:px2rem(50px);
            padding:px2rem(15px) px2rem(10px) px2rem(10px) px2rem(10px);
        }
        img.button:active{
            background-color: #e4c81e;
        }
        span{
            display: -webkit-box;
            position: relative;
            top:px2rem(5px);
            width:px2rem(80px);
            overflow: hidden;
            text-align:center;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;  //这里是在第二行有省略号
        }
    }
    & li.button:active{
        background-color: #e4c81e;
    }
    .add-btn{
        background: white;
         img{
            width:px2rem(80px);
            height:px2rem(80px);
        }
    }
}

.game-list{
     float: left;
    ul{
        float: inherit;
        width: px2rem(375px);
    }
    p{
        background: #F2F3F3;
        text-align:left;
        line-height: px2rem(30px);
        padding-left: px2rem(50px);
        font-size: px2rem(18px);
    }
}

.hot-game{
}

.love-game{
    p:before{
        content: '  ';
        display: block;
        background: #FF675B;
        height: px2rem(20px);
        width: px2rem(20px);
        float: left;
        position: relative;
        top: px2rem(5px);
        left: px2rem(-25px);
        text-align: left;
    }
    .s_add{
        background-repeat:no-repeat;
        background-size:auto 100%;
        padding-left: px2rem(30px);
        position: relative;
        right:px2rem(-75px);
        & img{
            width: px2rem(20px);
            height: px2rem(20px);
            position: relative;
            top:px2rem(3px);
            margin-right: px2rem(10px);
            &:active{
            background-color: #e4c81e;
            }
        }
    }
}
.play-game{
    margin-bottom:px2rem(55px);
    p:before{
        content: '  ';
        display: block;
        background: #D47CFF;
        height: px2rem(20px);
        width: px2rem(20px);
        float: left;
        position: relative;
        top: px2rem(5px);
        left: px2rem(-25px);
        text-align: left;
    }
}

